<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-07-15 15:03:17
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:22:43
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread">
        <img src="../../assets/images/icon-guanli.png" alt="" />
        <p>支付设置</p>
      </div>
    </div>
    <div class="payment-detail">
      <div class="left">
        <div
          class="payBaby"
          :class="paymentChange == 1 ? 'active' : ''"
          @click="paymentToggle"
        >
          <div class="basics">微信支付</div>
          <div style="margin-top: 30px">
            <span style="font-size: 14px; color: #2b2b2b">开启微信支付：</span
            ><el-switch
              v-model="chatChange"
              :active-value="true"
              :inactive-value="false"
              style="margin-left: 20px"
              @change="chatChangeStatus"
            >
            </el-switch>
            <div class="paySys">
              开通后，可在PC端、微信APP、WAP内选择微信支付，仅支持配置公众号支付支付。请先填写右侧表单中的服务号AppID、服务号AppSecret、MP文件验证码、商户号以及微信商户平台API密钥。<span
                style="color: #1267fa"
              >
                <a
                  target="_blank"
                  href="https://www.tongxingzhou.cn/saas/help/#/wxPay"
                >
                  查看教程>>
                </a>
              </span>
            </div>
          </div>
        </div>
        <div
          class="chat"
          :class="paymentChange == 2 ? 'active' : ''"
          @click="paymentToge"
        >
          <div class="basics">支付宝支付</div>
          <div style="margin-top: 30px">
            <span style="font-size: 14px; color: #2b2b2b">
              开启支付宝支付：
            </span>
            <el-switch
              v-model="aliChange"
              :active-value="true"
              :inactive-value="false"
              style="margin-left: 20px"
              @change="aliChangeStatus"
            >
            </el-switch>
            <div class="paySys">
              开通此接口后支持电脑浏览器和手机浏览器支付，需前往支付宝开通
              <span style="color: #1267fa">
                <a
                  target="_blank"
                  href="https://www.tongxingzhou.cn/saas/help/#/aliPay"
                  >查看教程>></a
                >
              </span>
            </div>
          </div>
        </div>
        <div
          class="chat"
          style="height: 110px"
          :class="paymentChange == 3 ? 'active' : ''"
          @click="setToggle"
        >
          <div class="basics">网银支付设置</div>
          <div style="margin-top: 30px">
            <span style="font-size: 14px; color: #2b2b2b">
              开启网银支付：
            </span>
            <el-switch
              v-model="setChange"
              :active-value="true"
              :inactive-value="false"
              style="margin-left: 20px"
              @change="bankChangeStatus"
            >
            </el-switch>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="basics">基础信息</div>
        <div class="payBaby-info" v-if="paymentChange == 1">
          <el-form :model="payForm" ref="payForm" label-position="top">
            <el-form-item label="开发者ID" style="width: 330px">
              <el-input v-model="payForm.appId"></el-input>
              <div class="tips">
                APPID和APP Secret来自微信公众号平台服务号内，在左侧
                【开发】-【亏本配置】-【开发者ID】中
              </div>
            </el-form-item>
            <el-form-item label="开发者密码" style="width: 330px">
              <el-input v-model="payForm.appSecret"></el-input>
            </el-form-item>
            <el-form-item label="商户号">
              <el-input v-model="payForm.mchId" style="width: 330px"></el-input>
              <div class="tips">
                商户号来自微信公众号平台内左侧栏【微信支付】-【商户信息】
              </div>
            </el-form-item>
            <el-form-item label="API密钥">
              <el-input
                v-model="payForm.apiKey"
                style="width: 330px"
              ></el-input>
            </el-form-item>
            <el-form-item label="API证书">
              <el-upload
                class="upload-demo"
                action="#"
                accept=".p12"
                :on-change="getFile1"
                :file-list="fileList"
                :limit="1"
                :http-request="httpRequest"
              >
                <el-button size="small" type="primary"> 点击上传 </el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="default" @click="weChat">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="chat-info" v-if="paymentChange == 2">
          <el-form :model="aliForm" ref="aliForm" label-position="top">
            <el-form-item>
              <div>
                <span style="font-size: 14px; color: #1f2e4d">
                  电脑网站支付接口
                </span>
                <span
                  style="font-size: 12px; color: #999999; margin-left: 20px"
                >
                  开通此交口后支持电脑浏览器支付，需前往支付宝开通，查看
                  <span style="color: #3377ff">
                    <a
                      target="_blank"
                      href="https://b.alipay.com/signing/productDetailV2.htm?productId=I1011000290000001000"
                      >支付教程</a
                    >
                  </span>
                </span>
              </div>
              <div>
                <span style="font-size: 14px; color: #1f2e4d">
                  手机网站支付接口
                </span>
                <span
                  style="font-size: 12px; color: #999999; margin-left: 20px"
                >
                  开通此交口后支持手机浏览器支付，需前往支付宝开通，查看
                  <span style="color: #3377ff">
                    <a
                      target="_blank"
                      href="https://b.alipay.com/signing/productDetailV2.htm?productId=I1011000290000001001"
                      >支付教程</a
                    >
                  </span>
                </span>
              </div>
            </el-form-item>
            <el-form-item label="开发者ID" style="width: 330px">
              <el-input v-model="aliForm.appId"></el-input>
            </el-form-item>
            <el-form-item label="应用公钥" style="width: 330px">
              <el-input
                v-model="aliForm.alipayPublicKey"
                style="width: 330px"
              ></el-input>
              <div class="tips">
                登录【蚂蚁金服开放平台】-【服务市场】-【密钥管理】，可查看
                <span style="color: #3377ff">
                  <a
                    target="_blank"
                    href="https://open.alipay.com/platform/keyManage.htm?keyType=partner"
                    >PID和MD5密钥</a
                  >
                </span>
              </div>
            </el-form-item>
            <el-form-item label="应用私钥">
              <el-input
                v-model="aliForm.appPrivateKey"
                style="width: 330px"
              ></el-input>
              <div class="tips">如需开启移动客户端支付，需填写支付宝账户</div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="default" @click="ali">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="settingInfo" v-if="paymentChange == 3">
          <div>
            <el-form
              :model="setForm"
              ref="setForm"
              :rules="setRules"
              label-position="top"
            >
              <el-form-item label="公司名称">
                <el-input
                  v-model="setForm.deptName"
                  style="width: 330px"
                  placeholder="请输入公司名称"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行">
                <el-input
                  v-model="setForm.bank"
                  style="width: 330px"
                  placeholder="请输入开户行"
                ></el-input>
              </el-form-item>
              <el-form-item label="账号">
                <el-input
                  v-model="setForm.bankAccount"
                  style="width: 330px"
                  placeholder="请输入账号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="default" @click="bankSubmit">
                  保存
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAli,
  editAli,
  getChat,
  editChat,
  getBank,
  editBank,
  chatChangeStatus,
  aliChangeStatus,
  bankChangeStatus,
} from "../../api/relevant";
export default {
  data() {
    return {
      wxId: "",
      aliId: "",
      olId: "",
      fileList: [],
      file: "",
      id: null,
      chatChange: true,
      aliChange: true,
      setChange: true,
      paymentChange: 1,
      setRules: {},
      setForm: {
        deptId: "",
        deptName: "",
        bank: "",
        bankAccount: "",
      },
      payForm: {
        appId: "",
        appSecret: "",
        mchId: "",
        apiKey: "",
      },
      aliForm: {
        appId: "",
        alipayPublicKey: "",
        appPrivateKey: "",
      },
      judge: "",
    };
  },
  created() {
    this.paymentToggle();
    this.getChatPay();
    this.getAliPay();
    this.getBank();
  },
  methods: {
    // 判断是否存在一个是开着的情况
    judgeOne() {
      let arr = {
        one: this.chatChange,
        two: this.aliChange,
        three: this.setChange,
      };
      console.log(arr);
    },
    // 线下
    async bankChangeStatus() {
      this.judgeOne();
      let status = "";
      if (this.setChange) {
        status = 1;
      } else {
        status = 2;
      }
      const confirmResult = await this.$confirm(
        "此操作将改变银联支付状态, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        if (this.chatChange) {
          this.setChange = false;
        } else {
          this.setChange = true;
        }
        return this.$message.info("已取消!");
      } else {
        bankChangeStatus({
          status: status,
          deptId: this.setForm.deptId,
        }).then((res) => {
          this.$message.success(res.msg);
        });
      }
    },
    // 支付宝
    async aliChangeStatus() {
      let status = "";
      if (this.aliChange) {
        status = 1;
      } else {
        status = 2;
      }
      const confirmResult = await this.$confirm(
        "此操作将改变支付宝支付状态, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        if (this.aliChange) {
          this.aliChange = false;
        } else {
          this.aliChange = true;
        }
        return this.$message.info("已取消!");
      } else {
        aliChangeStatus({
          status: status,
        }).then((res) => {
          this.$message.success(res.msg);
        });
      }
    },
    // 微信修改开启状态
    async chatChangeStatus() {
      let status = "";
      if (this.chatChange) {
        status = 1;
      } else {
        status = 2;
      }
      const confirmResult = await this.$confirm(
        "此操作将改变微信支付状态, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        if (this.chatChange) {
          this.chatChange = false;
        } else {
          this.chatChange = true;
        }
        return this.$message.info("已取消!");
      } else {
        chatChangeStatus({
          status: status,
        }).then((res) => {
          this.$message.success(res.msg);
        });
      }
    },
    bankSubmit() {
      editBank({
        deptId: this.setForm.deptId,
        bank: this.setForm.bank,
        bankAccount: this.setForm.bankAccount,
        id: this.olId,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getBank();
      });
    },
    // 获取网银支付设置
    getBank() {
      getBank().then((res) => {
        if (res.msg == "未配置" || res.data.enable == 2) {
          this.setChange = false;
        }
        if (res.data) {
          this.setForm.deptId = res.data.deptId;
          this.setForm.bank = res.data.bank;
          this.setForm.bankAccount = res.data.bankAccount;
          this.setForm.deptName = res.data.deptName;
          this.olId = res.data.id;
        }
      });
    },
    httpRequest(file) {},
    getFile1(file) {
      this.file = file.raw;
    },
    weChat() {
      let wechatPayConfigStr = {
        id: this.wxId,
        appId: this.payForm.appId,
        appSecret: this.payForm.appSecret,
        mchId: this.payForm.mchId,
        apiKey: this.payForm.apiKey,
      };
      var fd = new FormData();
      fd.append("wechatPayConfigStr", JSON.stringify(wechatPayConfigStr));
      fd.append("p12", this.file);
      editChat(fd).then((res) => {
        this.$message.success(res.msg);
        this.getChatPay();
      });
    },
    ali() {
      editAli({
        id: this.aliId,
        appId: this.aliForm.appId,
        alipayPublicKey: this.aliForm.alipayPublicKey,
        appPrivateKey: this.aliForm.appPrivateKey,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getAliPay();
      });
    },

    getAliPay() {
      getAli().then((res) => {
        if (res.msg == "未配置" || res.data.enable == 2) {
          this.aliChange = false;
        }
        if (res.data) {
          this.aliForm.appId = res.data.appId;
          this.aliForm.alipayPublicKey = res.data.alipayPublicKey;
          this.aliForm.appPrivateKey = res.data.appPrivateKey;
          this.aliId = res.data.id;
        }
      });
    },
    getChatPay() {
      getChat().then((res) => {
        if (res.msg == "未配置" || res.data.enable == 2) {
          this.chatChange = false;
        }
        if (res.data) {
          this.payForm.appId = res.data.appId;
          this.payForm.appSecret = res.data.appSecret;
          this.payForm.mchId = res.data.mchId;
          this.payForm.apiKey = res.data.apiKey;
          this.wxId = res.data.id;
          if (res.data.p12Name !== null) {
            this.fileList = [
              {
                name: res.data.p12Name,
                url: res.data.p12,
              },
            ];
          }
        }
      });
    },
    paymentToggle() {
      this.paymentChange = 1;
    },
    paymentToge() {
      this.paymentChange = 2;
    },
    setToggle() {
      this.paymentChange = 3;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ececec;
  .bread {
    margin-left: 5px;
    height: 30px;
    display: flex;
    align-items: center;
    vertical-align: middle;
    img {
      vertical-align: middle;
    }
    p {
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }
}
.payment-detail {
  display: flex;
  height: 77vh;
  .left {
    width: 45%;
    border-right: 1px solid #ececec;
    .payBaby {
      box-sizing: border-box;
      margin-top: 30px;
      width: 541px;
      height: 236px;
      border: 1px dashed #c4c5c6;
      padding: 24px 0 0 24px;
    }
    .chat {
      box-sizing: border-box;
      width: 541px;
      height: 192px;
      border: 1px dashed #c4c5c6;
      margin-top: 50px;
      padding: 24px 0 0 24px;
    }
  }
  .right {
    width: 55%;
    padding-top: 27px;
    padding-left: 62px;
  }
  .basics {
    position: relative;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .basics::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 3px;
    width: 3px;
    height: 14px;
    background: #1267fa;
  }
  .active {
    background: #f4f7ff;
    border: none !important;
  }
}
.payBaby-info {
  width: 450px;
  height: 592px;
  // background: #fbfbfc;
}
.tips {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 19px;
}
/deep/.el-form-item {
  margin-bottom: 15px;
}
.paySys {
  margin-top: 20px;
  width: 460px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}
/deep/.el-switch__core {
  width: 40px !important;
}
</style>